<template>
  <a-modal v-model:open="show"
           title=""
           @cancel="handleOk"
           :footer="null"
           width="60%"
           wrapClassName="videoPlay"
  >
    <template #closeIcon>
      <CloseOutlined style="color: #fff"/>
    </template>
    <div id="video">
      <div id="videoBox" v-if="show"></div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import {computed, nextTick, watch, ref, defineComponent} from "vue";
import {CloseOutlined} from '@ant-design/icons-vue'
import {getPreViewUrl} from '@/api/disk/disk.ts'
defineComponent({
  CloseOutlined
})
const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    preViewFile:{
      type:Object,
      default: ()=>{
        return null
      }
    }
})
const emits = defineEmits(['close'])
const show = computed(()=>props.show)
const preViewFile = computed(()=>props.preViewFile)
const player = ref(null)
const handleOk = ()=>{
  emits('close',false)
}
const queryPreViewUrl = (id)=>{
  getPreViewUrl({
    id
  }).then(res=>{
    player.value.src = res.result
  })
}
/*watch(()=>props.preViewFile,(value)=>{
  if(value){
    queryPreViewUrl(value.id)
  }
})*/
watch(()=>props.show,(value)=>{
  if(player.value){
    player.value.destroy();
    player.value = null
  }
  if(value){

      queryPreViewUrl(preViewFile.value.id)

    nextTick(()=>{
      player.value = new Player({
        id: 'videoBox',
        height: '100%',
        width: '100%',
        lang: 'zh',
        videoFillMode:'cover'
      });
    })
  }
})
</script>
<style scoped lang="scss">
#video{
  width: 100%;
  height: 500px;
}
:deep( .ant-modal-content){
  background-color: transparent;
}
</style>
